<template>
    <div class="popup">
        <div class="popup-top">
            <van-icon name="arrow-left" @click="ctrlShow" />
            <span>文章列表</span>
        </div>
        <h2 style="margin-left: 20px; margin-top: 60px;">{{ detailList.title }}</h2>
        <div class="popup-user">
            <img :src="detailList.avatar" alt="">
            <div class="left">
                <p>{{ detailList.nickname }}</p>
                <span>{{ timer }}</span>
            </div>
            <van-button class="valBtn" type="default">+ 已关注</van-button>
        </div>
        <div class="popup-container">
            <p>{{ detailList.content }}</p>
            <img :src="item" v-for="item in detailList.imageSrc" :key="item.id" alt="">
        </div>
        <div class="popup-bottom">
            <van-field class="frae" v-model="value" placeholder="发一条友善的评论" />
            <div class="icon">
                <van-icon name="comment-o" />
                <van-icon v-show="isIcon2" @click="coll" class="vanIcon" name="star" />
                <van-icon v-show="!isIcon2" @click="coll" class="vanIcon" name="star-o" />
                <van-icon v-show="isIcon1" @click="getGive" class="vanIcon" name="good-job" />
                <van-icon v-show="!isIcon1" @click="getGive" class="vanIcon" name="good-job-o" />
                <van-icon class="vanIcon" name="share" />
            </div>
        </div>
    </div>
</template>

<script>
import { getContainer, yesDetail, notDetail } from '../../request/api/home.js'
import timer from '../../utils/derevion.js'
export default {
    name: 'HomeContainer',
    data() {
        return {
            value: '',
            show: false,
            detailList: [],
            isIcon1: false,
            isIcon2: false,
            timer: ''
        }
    },
    props: ['detailId'],
    methods: {
        ctrlShow() {
            this.$emit('checkShow', this.show);
        },
        async coll() {
            if (!this.isIcon2) {
                let result = await yesDetail({
                    article_id: this.detailId,
                    user_id: localStorage.getItem('user_id')
                })
                if (result.data.msg == '收藏成功') {
                    this.isIcon2 = !this.isIcon2;
                    this.$toast(result.data.msg);
                }
            } else {
                let data = await notDetail({
                    article_id: this.detailId,
                    user_id: localStorage.getItem('user_id')
                })
                if (data.data.msg) {
                    this.isIcon2 = !this.isIcon2;
                    this.$toast(data.data.msg);
                }
            }
        },
        getGive() {
            this.isIcon1 = !this.isIcon1;
        }
    },
    async mounted() {
        let res = await getContainer(this.detailId);
        this.detailList = res.data.data;
        this.timer = timer(res.data.data.time);
    }
}
</script>

<style lang="less" scoped>
.popup {
    width: 100%;
    // height: 100%;

    .popup-top {
        background-color: rgb(7, 193, 96);
        width: 100%;
        height: 50px;
        line-height: 50px;
        color: #fff;
        position: fixed;
        top: 0;
        left: 0;

        span {
            margin-left: 36%;
        }
    }

    .popup-user {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;

        img {
            width: 50px;
            height: 50px;
            background: skyblue;
            border-radius: 50%;
            margin-left: 10px;
        }

        .left {
            height: 100%;
            margin-left: 20px;

            p {
                line-height: 0;
                width: 180px;
            }

            span {
                font-size: 14px;
                color: #999;
            }
        }

        .valBtn {
            width: 100px;
            height: 30px;
            border-radius: 15px;
        }
    }

    .popup-container {
        width: 100%;
        position: fixed;
        overflow: scroll;

        p {
            width: 93%;
            word-break: break-all;
            word-wrap: break-word;
            line-height: 25px;
            padding-left: 10px;
        }

        img {
            width: 200px;
            max-height: 300px;
            margin: 30px 5px 5px 5px;
        }
    }

    .popup-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #ccc;
        background-color: #fff;

        .frae {
            width: 48%;
            height: 30px;
            border-radius: 20px;
            margin: 0 1%;
            outline: 1px solid #e7e7e7;
            line-height: 0;
        }

        .icon {
            width: 50%;
            display: flex;
            justify-content: space-around;

            .vanIcon {
                font-size: 20px;
            }
        }
    }
}
</style>